<template>
	<view>
		<u-form :model="stagnantWaterParams" ref="uForm" label-width="160">
			<u-form-item label="险情地点" prop="address" :required="true">
				<u-input v-model="stagnantWaterParams.address" type="text" :border="true" placeholder="请输入地点" @click="checkAddress"/>
				<img class="rightIcon" src="../../../assets/images/home/icon_position.png">
			</u-form-item>
			<u-form-item label="发生时间" prop="happenTime" :required="true">
				<u-input v-model="stagnantWaterParams.happenTime" type="text" :border="true" disabled placeholder="请选择时间"
					@click="chooseTime" />
					<img class="rightIcon" src="../../../assets/images/home/icon_calendar.png">
			</u-form-item>
			<div class='checkTitle'> 积水影响</div>
			<u-form-item label="" prop="stagAffect">
				<!-- <u-radio-group v-model="stagnantWaterParams.stagAffect">
					<u-radio v-for="item in impacts" :name="item.value">{{item.label}}</u-radio>
				</u-radio-group> -->
				<div class='checkBtnList'>
					<div  class='checkBtn2' :class="{checkBtnActive:checkBtnIndex==1}" @click="checkBtnClick(1)">
						不影响交通
					</div>
					<div  class='checkBtn2' :class="{checkBtnActive:checkBtnIndex==2}" @click="checkBtnClick(2)">
						影响交通
					</div>
				</div>
			</u-form-item>
			<div class='checkTitle'> 积水深度</div>
			<u-form-item label="" prop="stagDepth">
				<!-- <u-radio-group v-model="stagnantWaterParams.stagDepth">
					<u-radio v-for="item in depths" :name="item.value">{{item.label}}</u-radio>
				</u-radio-group> -->
				<div class='checkBtnList'>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex2==1}" @click="checkBtnClick2(1)">
						30cm以下
					</div>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex2==2}" @click="checkBtnClick2(2)">
						30cm-50cm
					</div>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex2==3}" @click="checkBtnClick2(3)">
						50cm以上
					</div>
				</div>
			</u-form-item>
			<div class='checkTitle'>积水面积</div>
			<u-form-item label="" prop="stagArea">
				<!-- <u-radio-group v-model="stagnantWaterParams.stagArea">
					<u-radio v-for="item in areas" :name="item.value">{{item.label}}</u-radio>
				</u-radio-group> -->
				<div class='checkBtnList'>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex3==1}" @click="checkBtnClick3(1)" style='margin-right:8px'>
						1000m²以下
					</div>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex3==2}" @click="checkBtnClick3(2)" style='width: 35%;margin-right:8px'>
						1000m²-3000m²
					</div>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex3==3}" @click="checkBtnClick3(3)"  style='margin-right:8px'>
						3000m²以上
					</div>
				</div>
			</u-form-item>
			<div class='checkTitle'>备注说明</div>
			<u-form-item label="" prop="description">
				<u-input v-model="stagnantWaterParams.description" type="textarea" class="textareaBox" height="160" placeholder="文字填写险情原因、影响等" />
			</u-form-item>
			<div style="margin-bottom: 30rpx;"  class='checkTitle'>现场照片(上传照片或者视频)</div>
			<view class="uni-list list-pd">
				<view class="uni-uploader__files">
					<block v-for="(image,index) in imageList" :key="index">
						<view class="uni-uploader__file">
							<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage(index)">
							</image>
							<i class="close" @tap="deleteImage(index)"></i>
						</view>
					</block>
					<block v-for="(video,index) in videoList" :key="'video'+index">
						<view class="uni-uploader__file">
							<video :src="video" @click="playvideo(index)" autoplay muted :poster="video+'?vframe/jpg/offset/1'" @fullscreenchange="fullscreenchange"
								:id="'myVideo'+index"></video>
							<i class="close" @tap="deleteVideo"></i>
						</view>
					</block>

					<view class="uploader__img"><span @tap="chooseImage">添加图片</span></view>

					<view class="uploader__video"><span @tap="chooseVideo">添加视频</span></view>
				</view>
			</view>
		</u-form>
		<u-picker v-model="showTime" mode="time" :params="params" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		props:["stagnantWaterParams","addressInfo"],
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				showTime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
				},
				imageList: [], //图片数组
				videoList: [], //视频数组
				// imageFiles:[], //图片 file集合
				// videoFiles:[],//视频 file集合
				imageShow: true, //显示上传图片按钮
				videoShow: true, //显示上传视频按钮
				impacts: [{
						value: 1,
						label: "不影响交通",
					},
					{
						value: 2,
						label: "影响交通",
					}
				],
				depths: [{
						value: 1,
						label: "30cm以下",
					},
					{
						value: 2,
						label: "30cm-50cm",
					},
					{
						value: 3,
						label: "50cm以上",
					}
				],
				areas: [{
						value: 1,
						label: "1000m²以下",
					},
					{
						value: 2,
						label: "1000m²-3000m²",
					},
					{
						value: 3,
						label: "3000m²以上",
					}
				],
				checkBtnIndex:1,
				checkBtnIndex2:1,
				checkBtnIndex3:1,
			}
		},
		computed: {

		},
		methods: {
			checkBtnClick(data) {
				this.checkBtnIndex = data
				if(data==1) {
					this.stagnantWaterParams.stagAffect = 1
				} else {
					this.stagnantWaterParams.stagAffect = 2
				}
			},
			checkBtnClick2(data) {
				this.checkBtnIndex2 = data
				if(data==1) {
					this.stagnantWaterParams.stagDepth = 1
				} else if (data==2) {
					this.stagnantWaterParams.stagDepth = 2
				} else {
					this.stagnantWaterParams.stagDepth = 3
				}
			},
			checkBtnClick3(data) {
				this.checkBtnIndex3 = data
				if(data==1) {
					this.stagnantWaterParams.stagArea = 1
				} else if (data==2) {
					this.stagnantWaterParams.stagArea = 2
				} else {
					this.stagnantWaterParams.stagArea = 3
				}
			},
			checkAddress(){
				uni.navigateTo({url: '/pages/local/gaod'});
			},
			chooseTime() {
				this.showTime = true
			},
			confirm(data) {
				this.stagnantWaterParams.happenTime =
					`${data.year}-${data.month}-${data.day} ${data.hour}:${data.minute}:${data.second}`
			},
			chooseImage() {
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						if (res.tempFilePaths.length == 9) {
							this.imageShow = false
						}
						if (this.imageList.length >= 9 || res.tempFilePaths.length > 9) {
							uni.showToast({
								icon: 'none',
								title: '最多只可上传9张图片'
							})
							this.imageShow = false
						} else {
							this.imageList = this.imageList.concat(res.tempFilePaths)
							this.stagnantWaterParams.imageFiles = this.stagnantWaterParams.imageFiles.concat(
								res.tempFiles)

							console.log(this.stagnantWaterParams.imageFiles)
						}
					}
				});
			},
			chooseVideo() {
				uni.chooseVideo({
					count: 2,
					sourceType: ['camera', 'album'],
					success: (res) => {
						console.log(res);
						if (this.videoList.length > 1) {
							this.videoShow = false
						}
						if (this.videoList.length >= 2) {
							uni.showToast({
								icon: 'none',
								title: '最多只可上传2个视频'
							})
							this.videoShow = false
						} else {
							this.videoList.push(res.tempFilePath)
							this.stagnantWaterParams.videoFiles.push(res.tempFile)
						}

						console.log(this.stagnantWaterParams.videoFiles);
					}
				});
			},
			previewImage(index) {
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.imageList, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以				
				});
			},
			playvideo(index) {
				this.videoContext = uni.createVideoContext('myVideo' + index, this);
				this.videoContext.requestFullScreen({
					direction: 0
				});
				this.videoContext.play()
			},
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.pause()
				}
			},
			deleteImage(index) {
				this.imageList.splice(index, 1);
				this.stagnantWaterParams.imageFiles.splice(index, 1);
			},
			deleteVideo(index) {
				this.videoList.splice(index, 1);
				this.stagnantWaterParams.videoFiles.splice(index, 1);
			},
		},
		watch: {
		    addressInfo: {
		      handler: function (newV) {
				if(newV && newV.address){
					this.stagnantWaterParams.address = newV.address
					this.stagnantWaterParams.lgtd=newV.local[0];
					this.stagnantWaterParams.lttd=newV.local[1];
				}else{
					this.stagnantWaterParams.address = ""
					this.stagnantWaterParams.lgtd="";
					this.stagnantWaterParams.lttd="";
				}
		      },
		      immediate: true
		    },
		},
		mounted() {
			this.stagnantWaterParams.happenTime = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd') + ' ' + this.$u.timeFormat(new Date().getTime(), 'hh:MM:ss')
		}
	}
</script>

<style lang="scss" scoped>
	.uni-uploader__files {
		display: flex;
		flex-wrap: wrap;

		.uni-uploader__file {
			width: 168rpx;
			height: 168rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			uni-image,
			uni-video {
				width: 100%;
				height: 100%;
			}

			&:nth-child(3n) {
				margin-right: 0rpx;
			}

			.close {
				width: 48rpx;
				height: 48rpx;
				background: url(../../../assets/images/home/icon_del.png) no-repeat 0 0;
				background-size: 100%;
				display: inline-block;
				position: absolute;
				top: -12rpx;
				right: -12rpx;
				z-index: 9;
			}
		}
	}

	.uploader__img,
	.uploader__video {
		border: 1px dotted #C6C8CC;
		width: 210rpx;
		height: 210rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		span {
			color: #666;
			font-size: 24rpx;
			&::before {
				content: "";
				display: block;
				width: 66rpx;
				height: 66rpx;
				background: url(../../../assets/images/home/icon_video.png) no-repeat 0 0;
				background-size: 100%;
				margin: 0 auto 12rpx;
			}
		}
	}

	.uploader__img {
		margin-right: 20rpx;
		span {
			&::before {
				background: url(../../../assets/images/home/icon_picture.png) no-repeat 0 0;
				background-size: 100%;
			}
		}
	}
	// ::v-deep .u-form-item--left {
	// 	    width: 345px!important;
	// 	    flex: 0 0 345px!important;
	// 	    margin-bottom: 0px;
	// }
</style>
